<template>
  <div>
    {{ evaluateSearchVo }}{{ evaluateEntity }}
    <!-- 模糊 -->
    <el-row>
      时间选择：
      <el-button type="primary" size="mini" plain @click="allDay()">全部</el-button>
      <el-button type="primary" size="mini" plain @click="zjDay(1)">今天</el-button>
      <el-button type="primary" size="mini" plain @click="zjDay(2)">昨天</el-button>
      <el-button type="primary" size="mini" plain @click="zjDay(3)">最近7天</el-button>
      <el-button type="primary" size="mini" plain @click="zjDay(4)">最近30天</el-button>
      <el-button type="primary" size="mini" plain @click="zjDay(5)">本月</el-button>
      <el-button type="primary" size="mini" plain @click="zjDay(6)">本年</el-button>
      <el-date-picker v-model="evaluateSearchVo.dateTime" value-format="yyyy-MM-dd HH:mm:ss" type="date"
        placeholder="选择日期">
      </el-date-picker>
    </el-row>

    评价状态
    <template>
      <el-select v-model="evaluateSearchVo.status" placeholder="请选择评价状态">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </template>
    商品搜索
    <el-input v-model="evaluateSearchVo.spuName" style="width: 200px" placeholder="请输入内容"></el-input>
    用户名称
    <el-input v-model="evaluateSearchVo.userName" style="width: 200px" placeholder="请输入内容"></el-input>
    <el-button type="primary" round @click="getList()">查询</el-button>
    <el-button type="primary" @click="dialogFormVisible = true;evaluateEntity={}">添加虚拟评论</el-button>

    <!-- 表格 -->
    <template>
      <el-table :data="evaluateList" border style="width: 100%">
        <el-table-column prop="id" label="编号"> </el-table-column>
        <el-table-column prop="spuName" label="产品信息"> </el-table-column>
        <el-table-column prop="userName" label="用户名称"> </el-table-column>
        <el-table-column prop="goodsScore" label="商品评分"> </el-table-column>
        <el-table-column prop="serveScore" label="服务评分"> </el-table-column>
        <el-table-column prop="evaluateContent" label="评价内容">
        </el-table-column>
        <el-table-column prop="replyContent" label="回复内容">
        </el-table-column>
        <el-table-column prop="evaluateTime" label="评价时间">
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="reply(scope.row.id)" type="text" size="small">回复</el-button>
            <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!-- 添加评论 Form -->
    <el-dialog title="新增评论" :visible.sync="dialogFormVisible">
      <el-form :model="eval" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品" prop="goodsId">
          <el-button @click="goodsForm = true" round icon="el-icon-circle-plus-outline">添加商品</el-button>
          <el-input v-model="evaluateEntity.spuName" readonly></el-input>
        </el-form-item>
        <el-form-item label="用户名称" prop="name">
          <el-input v-model="evaluateEntity.userName"></el-input>
        </el-form-item>
        <el-form-item label="商品评价" prop="goodsScore">
          <template>
            <el-rate v-model="evaluateEntity.goodsScore">
            </el-rate>
          </template>
        </el-form-item>
        <el-form-item label="服务评价" prop="serveScore">
          <template>
            <el-rate v-model="evaluateEntity.serveScore">
            </el-rate>
          </template>
        </el-form-item>
        <el-form-item label="评价内容" prop="serveScore">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="evaluateEntity.evaluateContent">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addEvaluate()">确认评价</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 回复评价 -->
    <el-dialog title="评价回复" :visible.sync="replyDialogFormVisible">
      <el-form :model="replyEvaluate">
        <el-form-item label="回复内容" :label-width="formLabelWidth">
          <el-input v-model="evaluateSearchVo.replyContent" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="replyDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="replyCont()">确 定 回 复</el-button>
      </div>
    </el-dialog>

    <el-dialog title="商品信息" :visible.sync="goodsForm">
      <template>
        <el-table ref="singleTable" :data="goodsList" highlight-current-row @current-change="handleCurrentChange"
          style="width: 100%">
          <el-table-column type="index" width="50"> </el-table-column>
          <el-table-column property="id" label="商品编号" width="120">
          </el-table-column>
          <el-table-column property="spuName" label="商品名称" width="120">
          </el-table-column>
          <el-table-column property="spuPrice" label="价格" width="120">
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-button @click="clsGoodsForm()">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data () {
    //这里存放数据
    return {
      token: "",
      currentRow: null,
      goodsForm: false,
      goodsScore: "5",
      serveScore: "5",
      eval: {
        name: "",
      },
      replyEvaluate: {
        content: "",
      },
      spuName: "",
      userName: "",
      evaluateList: [],
      value1: "",
      msg: "列表页面",
      stu: {},
      dialogFormVisible: false,
      replyDialogFormVisible: false,
      formLabelWidth: "120px",
      options: [
        {
          value: "",
          label: "请选择评价状态",
        },
        {
          value: "0",
          label: "已回复",
        },
        {
          value: "1",
          label: "未回复",
        },
      ],
      value: "",
      evaluateSearchVo: {},
      evaluateEntity: {},
      goodsList: []
    };
  },
  //计算属性 类似于 data 概念
  computed: {},
  //监控 data 中的数据变化
  watch: {},
  //方法集合
  methods: {

    addEvaluate () {
      this.$http
        .post("http://localhost:8001/coco/goods/evaluate/addEvaluate", this.evaluateEntity, {
          headers: {
            "token": this.token,
            "type": "1"
          }
        })
        .then(({ data }) => {
          if (data.code == 0) {
            this.$message({
              message: '添加评价成功!',
              type: 'success'
            });
            this.dialogFormVisible = false;

          } else {
            this.$message.error('添加评价失败!');
          }
          this.getList();

        })
        .catch((err) => { });
    },

    clsGoodsForm () {
      this.goodsForm = false;
      this.evaluateEntity.spuName = this.currentRow.spuName;
      this.evaluateEntity.goodsId = this.currentRow.id;
    },
    handleCurrentChange (val) {
      this.currentRow = val;
    },


    zjDay (num) {
      this.evaluateSearchVo.day = num;
      this.evaluateSearchVo.dateTime = null;
      this.getList();
    },
    getList () {
      this.$http
        .post("http://localhost:8001/coco/goods/evaluate/search", this.evaluateSearchVo, {
          headers: {
            "token": this.token,
            "type": "1"
          }
        })
        .then(({ data }) => {
          if (data.code != 0) {
            this.$message({
              message: data.message,
              type: 'error'
            })
            this.$router.push("/");
          }
          this.evaluateList = data.data.rows;
          this.total = data.data.total;
        })
        .catch((err) => { });
    },
    getGoodsList () {
      this.$http
        .get("http://localhost:8001/coco/goods/goods/findAll", {
          headers: {
            "token": this.token,
            "type": "1"
          }
        })
        .then(({ data }) => {
          console.log(data.data)
          this.goodsList = data.data;
        })
        .catch((err) => { });
    },
    allDay () {
      this.evaluateSearchVo.dateTime = null;
      this.evaluateSearchVo.day = 0;
      this.getList();
    },
    handleClick (row) {
      console.log(row);
      axios.get("").then((res) => {
        this.stu = res.data;
      });
      this.dialogFormVisible = true;
    },
    reply (id) {
      this.evaluateSearchVo.id = id;
      this.replyDialogFormVisible = true;
      // location = "list.html";
      // this.getList();
    },
    replyCont () {
      this.$http
        .post(
          "http://localhost:8001/coco/goods/evaluate/addReplyById/" +
          this.evaluateSearchVo.id,
          this.evaluateSearchVo, {
          headers: {
            "token": this.token,
            "type": "1"
          }
        }
        )
        .then(({ data }) => {
          this.evaluateSearchVo.replyContent = null;
          this.getList();
          this.replyDialogFormVisible = false;
        })
        .catch((err) => { });
    },
    del (id) {
      this.$http
        .delete(
          "http://localhost:8001/coco/goods/evaluate/deleteEvaluateById/" + id, {
          headers: {
            "token": this.token,
            "type": "1"
          }
        }
        )
        .then(({ data }) => {
          if (data.code == 0) {
            this.$message({
              message: '删除评价成功!',
              type: 'success'
            });
          } else {
            this.$message.error('删除评价失败!');
          }
          this.getList();
        })
        .catch((err) => { });
    },
    resetForm () {
      this.evaluateEntity = {};
    },
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created () {
    this.token = localStorage.getItem("token");
    this.getList();
    this.getGoodsList();
  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted () { },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有 keep-alive 缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>